<template>
	<view class="menu" @touchmove.stop.prevent="stopPrevent">
		<view class="search">
			<uni-icons type="arrowleft" size="24" color="#999" @click="back" class="back"></uni-icons>
			<!-- <image class="back" :src="require('@/static/public/left.png')" mode="aspectFill" @click="back"></image> -->
			<input class="input" :value="searchValue" @input="cityInput" placeholder="请输入目的地"
				confirm-type="search"></input>
		</view>
		<scroll-view class="calendarList" scroll-y="true" :scroll-into-view="scrollIntoId">
			<!-- 当前 -->
			<view class="history">
				<view class="title">
					当前定位
				</view>
				<ul>
					<li @click="search(localName)">
						<image :src="require('@/static/public/position.png')" class="loc" mode="aspectFit"></image>
						{{localName}}
					</li>
				</ul>
			</view>
			<view class="history">
				<view class="title">
					历史搜索
				</view>
				<ul>
					<li v-for="(item,index) in historyList" :key="index" @click="search(item?item:'')"
						:class="cityName===item?'s':''">
						{{item}}
					</li>
				</ul>
			</view>
			<view class="history">
				<view class="title">
					热门城市
				</view>
				<ul>
					<li v-for="(item,index) in hotList" :key="index" @click="search(item?item:'')"
						:class="cityName===item?'s':''">
						{{item}}
					</li>
				</ul>
			</view>
			<view>
				<!-- 城市列表 -->
				<view v-for="(item, index) in (searchValue?selectLetterList:letter)" :id="item" :key="index">
					<view class="letterHeader">{{item}}</view>
					<view class="cityDiv" v-for="(city, i) in (searchValue?selectCity[item]:cityList[item])" :key="i"
						@click="search(city?city:'')">
						<text class="name">{{city}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧字母 -->
		<view class="letters">
			<view class="selectLetter" :style="{'top':top}" v-show="showTouchPreview">
				<div>{{selectLetter}}</div>
			</view>
			<!-- <view class="lettersItem" @click="scrollTo('hot')">推荐热门</view> -->
			<view class="lettersItem" v-for="item in letter" :key="item" @click="scrollTo(item)"
				@touchstart="touchStart" @touchmove="touchMove" @touchend="touchUp" :id="'letter'+item">
				<span :class="scrollIntoId===item?'oriange':''">{{ item }}</span>
			</view>
		</view>
	</view>
</template>
<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import cityList from './cityData.js'
	export default {
		data() {
			return {
				searchValue: "",
				scrollIntoId: "",
				searchList: [],
				list: [],
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W",
					"X", "Y", "Z"
				],
				selectLetter: '',
				showTouchPreview: false,
				historyList: [],
				cityList,
				hotList: ['全国', '上海', '北京', '广州', '成都', '三亚', '杭州', '西安', '兰州', '南京', '厦门', '深圳', '武汉'],
				// cityList:{},
				selectLetterList: [],
				selectCity: {},
				top: 0
			};
		},
		props: {
			cityName: {
				type: String,
				default: ''
			},
			show: {
				type: Boolean,
				default: false
			},
      canStorge: {
        type: Boolean,
				default: true
      }
		},
		computed: {
			localName() {
				return this.$store.state.localName
			}
		},
		components: {},
		onLoad(e) {
			this.cityName = e.cityName;
		},
		mounted() {
			// this.getCityList()
		},
		methods: {
			getCityList() {
				this.$ajax({
					method: 'post',
					url: '/web/dictionary/getCitySortByLetter'
				}).then(res => {
					this.cityList = res.data
				})
			},
			stopPrevent() {

			},
			back() {
				this.searchValue = ''
				this.$emit('cityClose')
			},
			scrollTo(letter) {
				this.selectLetter = letter == "hot" ? "最" : letter;
				this.scrollIntoId = letter;
			},
			touchStart(e) {
				// #ifdef H5	
				this.selectLetter = e.currentTarget.id.replace('letter', '')
				let selectLetterIndex = this.letter.findIndex(t => {
					return t === this.selectLetter
				})
				let letterHeight = e.target.offsetTop / selectLetterIndex
				this.showTouchPreview = true
				this.$nextTick(t => {
					let selectLetterDom = document.querySelector('.selectLetter')
					this.top = e.currentTarget.offsetTop - letterHeight / 2 + 'px'
					// selectLetterDom.style.top = e.currentTarget.offsetTop - letterHeight/2 + 'px'
				})
				// #endif
				// #ifndef H5


				// query.select('.letters').boundingClientRect(data => {
				this.selectLetter = e.currentTarget.id.replace('letter', '')
				this.top = e.currentTarget.offsetTop + 'px'
				this.showTouchPreview = true
				// })
				// #endif
			},
			touchMove(e) {

				// #ifdef H5	
				let lettersDom = document.querySelector('.letters')
				let lettersDomOffsetTop = lettersDom.offsetTop / 2
				let chooseLetter = e.currentTarget.id.replace('letter', '')
				let chooseLetterIndex = this.letter.findIndex(t => {
					return t === chooseLetter
				})
				let letterHeight = e.target.offsetTop / chooseLetterIndex
				let changedClientY = e.changedTouches[0].clientY
				if (changedClientY > lettersDomOffsetTop && changedClientY < lettersDomOffsetTop + lettersDom.offsetTop) {
					// 未超出 地区字母表的 显示， 超出的不显示
					this.showTouchPreview = true
					if (chooseLetterIndex != -1) {
						let selectLetter = this.letter[Math.floor((changedClientY - lettersDomOffsetTop) / letterHeight)]
						if (selectLetter) {
							this.selectLetter = selectLetter.toUpperCase()
							let selectOffsetHeight = this.letter.findIndex(t => {
								return t === selectLetter
							}) * letterHeight
							let selectLetterDom = document.querySelector('.selectLetter')
							this.$nextTick(t => {
								selectLetterDom.style.top = selectOffsetHeight - letterHeight / 2 + 'px'
							})
						} else {
							this.showTouchPreview = false
						}
					}
				} else {
					this.showTouchPreview = false
				}
				// #endif
				// #ifndef H5

				const query = uni.createSelectorQuery().in(this);
				query.select('.letters').boundingClientRect(data => {
					let letterHeight = data.height / this.letter.length
					let index = Math.floor((e.changedTouches[0].clientY - data.top) / letterHeight)
					let selectLetter = this.letter[index]
					if (selectLetter) {
						this.selectLetter = selectLetter
						this.top = index * (letterHeight) + 'px'
					}
				}).exec();

				// #endif
			},
			touchUp(e) {
				this.showTouchPreview = false
				if (this.selectLetter) {
					this.scrollTo(this.selectLetter)
				}

			},
			getId(index) {
				return this.letter[index];
			},
			cityInput(e) {
				this.searchValue = e.target.value;
				const value = e.target.value;
				if (value !== '' && this.cityList) {
					const queryData = this.query(this.cityList, String(value).trim());
					this.searchList = queryData;
				} else {
					this.searchList = [];
				}
			},
			query(source, text) {
				let selectLetter = []
				let selectObj = {}
				this.letter.forEach(res => {
					if (source[res]) {
						let arr = source[res].filter(_res => {
							return _res.indexOf(text) > -1
						})
						if (arr.length > 0) {
							selectLetter.push(res)
							selectObj[res] = arr
						}
					}
				})
				this.selectLetterList = selectLetter
				this.selectCity = selectObj
			},
			search(item) {
        if(this.canStorge) {
          this.$store.commit('changeStoreCity', item)
        }
				this.distinct(item)
				this.$emit('update:cityName', item)
				this.$emit('citySearch', item)
			},
			distinct(item) {
				let bool = false
				this.historyList.forEach(res => {
					if (res == item) {
						bool = true
					}
				})
				if (!bool) {
					this.historyList.unshift(item)
				}
			}
		}
	};
</script>
<style lang="less" scoped>
	.menu {
		position: fixed;
		z-index: 9999;
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
		background-color: #ffffff;

		.search {
			display: flex;
			align-items: center;
			padding: 20upx 30upx 20upx 0;

			.back {
				// padding: 0 20upx;
				margin: 0 30upx;
			}

			.input {
				flex: 1;
				line-height: 70upx;
				height: 70upx;
				background: #FFF;
				border: 3upx #ffde2c solid;
				padding: 0 79upx;
				border-radius: 50upx;
				position: relative;
				font-size: 26upx;

				&::before {
					content: '';
					position: absolute;
					left: 37upx;
					top: 50%;
					transform: translateY(-50%);
					width: 32upx;
					height: 32upx;
					background: url('~@/static/public/otherSearch.png')no-repeat;
					background-size: cover;
				}
			}
		}

		.letters {
			position: fixed;
			right: 6upx;

			bottom: 0px;
			// padding:0 12upx 0 22upx;
			top: 50%;
			transform: translateY(-50%);
			color: #999;
			text-align: center;
			font-size: 22upx;
			font-weight: bold;
		}

		.oriange {
			color: #ffde2c;
		}

		.selectLetter {
			position: fixed;
			right: 50rpx;
			// top: 50%;
			// transform: translateY(-50%);
			top: 0;
			background-color: #ffde2c;
			color: #fff;
			text-align: center;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 50%;
			font-size: 42upx;
			font-weight: bold;
		}

		.lettersItem {
			// margin-bottom: 8upx;
			width: 40upx;
			height: 32upx;
			line-height: 32upx;
			// padding-bottom:8upx;
		}

		.calendarList {
			position: absolute;
			top: 110upx;
			bottom: 0upx;
			width: 100%;
			background-color: #ffffff;

			.city {
				padding: 12upx 30upx 32upx;
				color: #3a3a3a;
				font-size: 30upx;
				line-height: 42upx;
				height: 42upx;
				font-weight: bold;
			}

			.history {
				padding: 0 20upx 12upx 30upx;

				.loc {
					width: 35upx;
					height: 35upx;
					margin-right: 10upx;
				}

				.title {
					line-height: 40upx;
					height: 40upx;
					color: #888;
					font-size: 28upx;
				}

				ul {
					display: flex;
					padding-top: 15upx;
					flex-wrap: wrap;

					li {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #27292c;
						font-size: 28upx;
						background-color: #f8f8f8;
						border-radius: 34upx;
						margin: 0 20upx 20upx 0;
						// width: 160upx;
						// height: 70upx;
						padding: 20upx 44upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						&:nth-child(4n) {
							margin-right: 0;
						}
					}

					.s {
						background: #FFF3E9;
						color: #ffde2c;
					}
				}
			}

			.none {
				display: none;
			}



			.letterHeader {
				height: 60upx;
				font-size: 30upx;
				color: #666;
				padding-left: 24upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background-color: #ebedef;
			}

			.cityDiv {
				width: 690upx;
				height: 90upx;
				line-height: 90upx;
				margin-left: 20upx;
				border-bottom: 1upx solid #e0e2e4;
				display: flex;
				align-items: center;

				&:last-child {
					border-bottom: 0;
				}

				.name {
					font-size: 28upx;
					color: #000000;
				}
			}
		}
	}
</style>
